<template>
  <div class="page">
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="addNew">新增</el-button>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status">
          <el-option label="进行中" :value="1"></el-option>
          <el-option label="已结束" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付时间" prop="createTime">
        <DatePicker v-model="cTime" :timevalue1="cTime"></DatePicker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
    </el-form>

    <el-col :span="1.5" style="margin-bottom:10px;">
      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
        v-hasPermi="['ds:productOrder:export']">导出</el-button>
    </el-col>

    <el-table :data="list" border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="updateBy" width="200"></el-table-column>
      <el-table-column label="类目" prop="cateId"></el-table-column>
      <el-table-column label="图片" width="80">
        <template slot-scope="scope">
          <el-image :src="scope.row.remark" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="单次参与价" prop="unitPrice"></el-table-column>
      <el-table-column label="总次数" prop="totalNumber"></el-table-column>
      <el-table-column label="单人参与次数" prop="maximum"></el-table-column>
      <el-table-column label="已参与次数" prop="maxNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="checkJoinPerson(scope.row.id)">
            {{ scope.row.maxNumber }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="剩余次数" prop="shengNumber"></el-table-column>
      <el-table-column label="发货状态" prop="shipmentStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.shipmentStatus === 0">待填写地址</span>
          <span v-else-if="scope.row.shipmentStatus === 1">待发货</span>
          <span v-else-if="scope.row.shipmentStatus === 2">待收货</span>
          <span v-else-if="scope.row.shipmentStatus === 3">已收货</span>
          <span v-else>/</span>
        </template>
      </el-table-column>

      <el-table-column label="配送方式" prop="shippingType">
        <template slot-scope="scope">
          <!-- {{ scope.row.shippingType === 1 ? "快递" : "自提" }} -->
          <span v-if="scope.row.shippingType == 1">快递</span>
          <span v-else-if="scope.row.shippingType == 2">自提</span>
          <span v-else>/</span>
        </template>
      </el-table-column>
      <el-table-column label="设置时间" prop="startTime"></el-table-column>
      <el-table-column label="开奖时间" prop="lotteryTime"></el-table-column>
      <el-table-column label="开奖号码" prop="winningCode"></el-table-column>
      <el-table-column label="获奖者ID" prop="winningId"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? "进行中" : "已结束" }}
        </template>
      </el-table-column>

      <el-table-column label="管理">
        <template slot-scope="scope">
          <el-button type="danger" v-if="scope.row.status === 1" @click="enterStop(scope.row.id)">
            停止
          </el-button>

          <el-button v-if="scope.row.shipmentStatus == 1 && scope.row.shippingType == 1" type="primary"
            @click="delivery(scope.row)">
            发货
          </el-button>

          <el-button v-if="scope.row.shipmentStatus == 1 && scope.row.shippingType == 2" type="primary"
            @click="enterDeliveryGet(scope.row)">
            确认收货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum" @current-change="getData">
      </el-pagination>
    </div>

    <JoinUserPopup :list="joinUserList" ref="join"></JoinUserPopup>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" label-width="80">
      <el-form :model="form">
        <el-form-item label="选择商品">
          <el-select v-model="form.plid" placeholder="请选择商品">
            <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="发货" :visible.sync="deliveryShow" label-width="80">
      <el-form>
        <el-form-item label="选择快递">
          <el-select v-model="deliveryNumber" placeholder="请选择快递">
            <el-option v-for="item in deliveryList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="快递号">
          <el-input v-model="deliveryId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deliveryShow = false">取 消</el-button>
        <el-button type="primary" @click="submitDelivery">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { stageList, stopStage, listLoot, stageAdd, stageExport } from "@/api/ds/loot";
import JoinUserPopup from "./components/JoinUserPopup/index.vue";

import delivery from "@/utils/delivery";
import { lootListDelivery } from "@/api/ds/loot";
import DatePicker from "@/components/DatePicker";

export default {
  components: { JoinUserPopup, DatePicker },
  props: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
     
      },

      list: [],
      total: 0,
      cTime:[],
      dialogFormVisible: false,
      form: {},
      

      goodsList: [],
      // 参加用户列表
      joinUserList: [],

      deliveryOrder: null,
      deliveryShow: false,
      //
      deliveryNumber: "",
      deliveryId: "",

      deliveryList: delivery,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
    this.getGoodsList();
  },
  methods: {
    async enterDeliveryGet(row) {
      let res = await lootListDelivery({
        id: row.id,
        shipmentStatus: 3,
      });

      if (res.code === 200) {
        this.$notify({
          title: "成功",
          message: res.msg,
          type: "success",
        });
        this.getData();
      }
    },
    handleExport() {
      this.$confirm("是否确认导出所有订单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return stageExport({ status: '2' });
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    delivery(row) {
      this.deliveryOrder = row;
      this.deliveryShow = true;
    },
    async submitDelivery() {
      let res = await lootListDelivery({
        id: this.deliveryOrder.id,
        deliveryNumber: this.deliveryNumber,
        deliveryId: this.deliveryId,
        shipmentStatus: 2,
      });
      if (res.code === 200) {
        console.log(res);
        this.$notify({
          title: "成功",
          message: res.msg,
          type: "success",
        });

        this.deliveryShow = false;
        this.deliveryOrder = null;
        this.deliveryId = "";
        this.deliveryNumber = "";

        this.getData();
      }
    },
    checkJoinPerson(id) {
      this.$refs.join.checkJoinPerson(id);
      this.$refs.join.show = true;
    },
    async getData() {
      let res = await stageList(this.addDateRange(this.queryParams, this.cTime, ""));
      if (res.code === 200) {
        console.log(res);
        this.list = res.rows;
        this.total = res.total;
      }
    },

    async enterStop(id) {
      let res = await stopStage({ id });
      if (res.code === 200) {
        this.$notify({
          type: "success",
          title: "成功",
          message: res.msg,
        });

        this.getData();
      }
    },

    async getGoodsList() {
      let res = await listLoot();
      if (res.code === 200) {
        console.log(res);
        this.goodsList = res.rows;
      }
    },

    addNew() {
      this.dialogFormVisible = true;
    },

    async submitAdd() {
      this.dialogFormVisible = false;
      let res = await stageAdd(this.form);
      if (res.code === 200) {
        console.log(res);
        this.$notify({
          type: "success",
          title: "成功",
          message: res.msg,
        });
        this.getData();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;

  .pagination {
    width: 100%;
    height: 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
